<template>
  <div class="content-box">
    <div class="content">
      <div class="group">
        <div class="header">
          <div class="title">智能锁地图</div>
          <div class="handler">
            <div class="showCode">
              <el-switch v-model="showCode" style="--el-switch-on-color: #54bcbd" /><span class="showCodeLabel">显示编码</span>
            </div>
          </div>
        </div>
        <div class="tree">
          <ZTree :id="treeId" :api="getRoomMapTree" :show-code="showCode" @click-dom="zTreeOnClick" />
        </div>
      </div>
      <div class="main">
        <div class="header">
          <div class="title">{{ mapName }}</div>
        </div>
        <div class="table-box" v-loading="loading">
          <SearchForm
            :search="_search"
            :reset="_reset"
            :search-param="searchParam"
            :columns="columns"
            :search-col="{ xs: 1, sm: 1, md: 2, lg: 2, xl: 3 }"
          />
          <div class="gatewayList" v-if="gatewayList.length">
            <div :class="['gateway', `gateway_${item.gatewayStatus}`]" v-for="item in gatewayList" :key="item.gatewayId">
              <div class="gatewayStatus">{{ gatewayStatusList[item.gatewayStatus] }}</div>
              <div class="gatewayName">{{ item.gatewayName }}</div>
            </div>
          </div>
          <div class="noData" v-else>暂无数据</div>
          <div class="footer">
            <Pagination
              :pageable="pageable"
              :handle-size-change="handleSizeChange"
              :handle-current-change="handleCurrentChange"
              :small="true"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="tsx" name="remoteControl">
/* eslint-disable */
// @ts-nocheck
import { ref, provide } from "vue";
import ProTable from "@/components/ProTable/index.vue";
import SearchForm from "@/components/SearchForm/index.vue";
import Pagination from "@/components/ProTable/components/Pagination.vue";
import ZTree from "@/components/ZTree/index.vue";
import { getRoomMapTree } from "@/api/modules/common";
import { getGatewayList } from "@/api/modules/smartLock/control/gatewayControl.ts";
import { connectStatus } from "@/utils/serviceDict";

const treeId = ref("tree");
const showCode = ref(false);
const loading = ref(false);
const mapids = ref([]);
const mapName = ref("");
const gatewayName = ref("");
const gatewayStatus = ref();
const gatewayList = ref([]);
const gatewayStatusList = ["未入网", "离线", "在线"];
const pageable = ref({
  // 当前页数
  pageNum: 1,
  // 每页显示条数
  perPageNum: 100,
  // 总条数
  total: 0
});

const enumMap = ref(new Map<string, { [key: string]: any }[]>());
provide("enumMap", enumMap);
enumMap.value.set("gatewayStatus", connectStatus);

const columns = [
  {
    prop: "gatewayName",
    label: "网关名称",
    search: { el: "input" }
  },
  {
    prop: "gatewayStatus",
    label: "连接状态",
    enum: connectStatus,
    search: { el: "select" }
  }
];

const searchParam = ref({
  gatewayName: "",
  gatewayStatus: ""
});

/**
 * 搜索
 */
const _search = () => {
  getGatewayFunc();
};

/**
 * 搜索重置
 */
const _reset = () => {
  searchParam.value = {
    gatewayName: "",
    getGatewayFunc: ""
  };
  getGatewayFunc();
};

const handleCurrentChange = val => {
  pageable.value.pageNum = val;
  getGatewayFunc();
};

const handleSizeChange = val => {
  pageable.value.perPageNum = val;
  getGatewayFunc();
};

/**
 * 获取网关列表
 */
const getGatewayFunc = async () => {
  loading.value = true;
  try {
    const res = await getGatewayList({
      mapndxs: mapids.value,
      pageNum: pageable.value.pageNum,
      perPageNum: pageable.value.perPageNum,
      ...searchParam.value
    });
    const { page, records } = res.data;
    loading.value = false;
    pageable.value.total = page.total;
    gatewayList.value = records;
  } catch (error) {
    loading.value = false;
    console.log(error);
  }
};

/**
 * 点击树节点
 */
function zTreeOnClick({ treeNode, ids }) {
  loading.value = true;
  mapids.value = ids;
  mapName.value = treeNode.name;
  pageable.value.pageNum = 1;
  getGatewayFunc();
}
</script>
<style scoped lang="scss">
@import "./index.scss";
</style>
